<template>
  <div class="qa-box">
    <div class="top">
      <div class="top-left">
        <div class="indicator"></div>
        <div class="left-text">对话列表</div>
      </div>
      <div class="top-right" @click="clearConversation"><i class="el-icon-delete-solid"></i>清空对话</div>
    </div>
    <div class="content">
      <!-- 文字问答显示区域 -->
      <div class="qa-text-box" ref="boxRef">
        <!-- Q/A item -->
        <div class="qa-item" v-for="(item,index) of qaList" :key="index">
          <div class="time">{{item.time}}</div>
          <div class="title" v-if="item.title">{{item.title}}</div>
          <div :class="item.type==='0'?'text-q':'text-a'">{{item.text}}</div>
        </div>
      </div>
      <!-- 输入问题区域 -->
      <div class="textarea-box">
        <el-input
          ref="inputRef"
          type="textarea"
          :rows="5"
          placeholder="请输入您想咨询的问题......"
          v-model.trim="questionInput">
        </el-input>
        <div class="btn-send" @click="handleSend">发送</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      questionInput:'',
      id:0,//回答id
      defaultQA:{//默认
        time: this.getCurrentTime(),
        title:'欢迎使用智能问答机器人系统',
        text:'引入语言大模型、预训练向量模型、大模型微调算法、文本相似度、关键词提取等技术，提供智能问答、类案推送等智能服务，实现用户提出问题，系统语义推理、智能推送结果信息，极大的降低用户在信息检索中的时间消耗。'
      },
      // 问答列表展示
      qaList:[
        /* {
          id:1,//问题和回答的id是一一对应的
          type:'0',//type: 0问题 1回答
          time: this.getCurrentTimeAfter(this.getRandomInt(1,6)),
          text:'寻宿迁绿帽男，想在老婆不知情状态下绿的，可以私我QQ 1136755524'
        },
        {
          id:1,
          type:'1',
          time: this.getCurrentTimeAfter(this.getRandomInt(1,6)),
          text:'系统判断该角色为“代驾”，其QQ号码1136755524'
        }, */
      ],
      // 回答库
      answersLib:[
        {
          id:1,
          type:'1',
          text:'系统判断该角色为“代驾”，其QQ号码1136755524'
        },
        {
          id:2,
          type:'1',
          text:'冠状病毒是一个大型病毒家族，严重程度从感冒到重症疾病不等，如中东呼吸综合征（MERS）和严重急性呼吸综合征（SARS）。'
        },
        {
          id:3,
          type:'1',
          text:'新型冠状病毒是以前从未在人类中发现的冠状病毒新毒株。'
        },
        {
          id:4,
          type:'1',
          text:'中国在2002年发生了从果子狸传至人的SARS冠状病毒疫情，沙特阿拉伯在2012年发生了从单峰骆驼传至人的MERS冠状病毒疫情。'
        },
        {
          id:5,
          type:'1',
          text:'症状因病毒而异，常见体征有呼吸道症状、发热、咳嗽、气促和呼吸困难等。在较严重病例中，感染可导致肺炎、严重急性呼吸综合征、肾衰竭，甚至死亡。'
        },
      ]
    }
  },
  mounted(){
    this.qaList.unshift(this.defaultQA)
  },
  methods:{
    clearConversation(){
      this.qaList=[]
      this.id=0//重置问题id
    },
    handleSend(){
      if(!this.questionInput){
        this.$message.warning('请输入您想咨询的问题')
        return
      }
      // 1将问题加到问答文本展示区
      this.id+=1
      let randomSecond=this.getRandomInt(1,6)
      this.qaList.push({
        id: this.id,
        type:'0',//type: 0问题 1回答
        time: this.getCurrentTimeAfter(randomSecond),
        text:this.questionInput
      })
      this.questionInput=''
      // 2从回答库中找出问题id对应的回答, 将该回答添加到问答文本展示区
      let idx=this.answersLib.findIndex((item)=>item.id===this.id)
      if(idx!==-1){
        setTimeout(()=>{
          this.qaList.push({
            ...this.answersLib[idx],
            time: this.getCurrentTimeAfter(randomSecond)
          })
          // 3等待dom更新后自动滚动容器至其内容的底部
          this.autoScroll()
        }, 2000)//2秒后回答
      }else{
        setTimeout(()=>{
          this.autoScroll()
          this.$message.warning('没有找到您要的回答哦')
        },2000)
      }
    },
    autoScroll(){
      this.$nextTick(()=>{
        const ele=this.$refs.boxRef
        ele.scrollTop=ele.scrollHeight
        this.$refs.inputRef.focus()//回答完问题最后光标聚焦
      })
    },
    getCurrentTime(){
      // 获取当前北京时间的时间戳（单位为毫秒）
      var stamp= new Date().getTime() + 8 * 60 * 60 * 1000;
      // 格式化北京时间为"YYYY-MM-DD HH:mm:ss"
      return new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
    },
    getCurrentTimeAfter(duration){//获取当前时间的多少秒后的时间，duration单位为秒数
      // 获取当前北京时间的时间戳（单位为毫秒）
      var stamp= new Date().getTime() + 8 * 60 * 60 * 1000 + duration*1000;
      // 格式化北京时间为"YYYY-MM-DD HH:mm:ss"
      return new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
    },
    // 获取一个包括最小值但不包括最大值的随机数(整数)
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
  }

}
</script>

<style scoped lang="scss">
$qa_bg_color:#292A2F;
$dark_color:#1F2024;
$gold_color:#B4A493;
$input_color:#404145;

.qa-box{
  box-sizing: border-box;
  height:calc(100% - 50px);
  border-top:10px solid $qa_bg_color;
  border-left:10px solid $qa_bg_color;
  border-right:10px solid $qa_bg_color;
  background:$dark_color;
  .top{
    margin-top:10px;
    padding-right:20px;
    display:flex;
    align-items: center;
    justify-content: space-between;
    .top-left{
      display:flex;
      align-items: center;
      .indicator{
        margin-right:10px;
        width:5px;
        height:16px;
        background:$gold_color;
      }
      .left-text{
        color:#fff;
      }
    }
    .top-right{
      padding:5px 10px;
      display:flex;
      align-items: center;
      background:#212226;
      color:$gold_color;
      border:1px solid $gold_color;
      border-radius: 5px;
      font-size:12px;
      cursor:pointer;
      .el-icon-delete-solid{
        color:$gold_color;
        margin-right:5px;
      }
    }
  }
  .content{
    height:calc(100% - 40px);
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    .qa-text-box{
      height:100%;
      // flex:1;
      margin:15px;
      padding:15px;
      overflow-y: auto;
      background: $qa_bg_color;
      .qa-item{
        margin-bottom:20px;
        display:flex;
        flex-direction: column;
        font-size:12px;
        .time{
          line-height:30px;
          color:$gold_color;
        }
        .title{
          line-height:25px;
          color:#5184BC;
        }
        .text-q{
          line-height:25px;
          color:$gold_color;
        }
        .text-a{
          line-height:25px;
          color:#fff;
        }
      }
    }
    .textarea-box{
      position:relative;
      margin:0 15px 15px;
      height:120px;
      .btn-send{
        position: absolute;
        right:20px;
        bottom: 20px;
        width: 50px;
        height: 25px;
        line-height: 25px;
        text-align:center;
        color:#333;
        cursor:pointer;
        font-size:12px;
        background-color:$gold_color;
      }
    }
  }
}
::v-deep .el-textarea__inner{
  background-color: $input_color !important;
  color:$gold_color !important;
  border-color:$gold_color !important;
}
</style>
